<template>
	<view class="add">
		<view class="tips"><text>请认真填写就诊人信息</text></view>
		<view class="line fristLine">
			<text class="name">关系</text>
			<text
				class="placeholder"
				:style="relationColor"
				@click="selRelationship"
			>
				{{ relation }}
			</text>
			<text class="iconfont icon-xiangyou1"></text>
		</view>
		<view class="line">
			<text class="name">姓名</text>
			<input
				v-model="personData.name"
				type="text"
				placeholder-class="placeholder"
				placeholder="请输入真实姓名"
			/>
		</view>
		<view class="line">
			<text class="name">证件类型</text>
			<text :style="cardTypeColor" class="placeholder" @click="selType">
				{{ cardType }}
			</text>
			<text class="iconfont icon-xiangyou1"></text>
		</view>
		<view class="line">
			<text class="name">证件号码</text>
			<input
				v-model="personData.cardNum"
				type="text"
				placeholder-class="placeholder"
				placeholder="请输入证件号码"
			/>
		</view>
		<view class="line">
			<text class="name">就诊卡号</text>
			<input
				v-model="personData.visitNum"
				type="text"
				placeholder-class="placeholder"
				placeholder="请输入就诊卡号"
			/>
		</view>
		<view class="line">
			<text class="name">手机号码</text>
			<input
				v-model="personData.phone"
				type="text"
				placeholder-class="placeholder"
				placeholder="请输入手机号码"
			/>
		</view>
		<view class="line">
			<text class="name">就诊人地址</text>
			<textarea
				v-model="personData.address"
				auto-height
				style="width:400rpx;"
				placeholder-class="placeholder"
				placeholder="选填"
			></textarea>
		</view>
		<view class="line">
			<text class="name">设为默认就诊人</text>
			<switch class="setDefault" checked="true" @change="changeDefault" />
		</view>
		<view class="tip">
			<text>
				初次添加就诊人请绑定本院就诊卡号，未持有本院就诊卡的患者需到本院自助机或窗口办理就诊卡后方可进行添加。
			</text>
		</view>
		<view @click="submit" class="save"><text>保存</text></view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { addPatient } from '@/api/personApi.js'
import { useLoginStore } from '@/store/loginStore.js'
const loginStore = useLoginStore()
const personData = ref({
	address: '',
	cardNum: '',
	idcardType: -1,
	name: '',
	phone: '',
	relationType: -1,
	status: 0,
	userId: loginStore.id,
	visitNum: ''
})
let relation = ref('请选择与本人关系')
let cardType = ref('请选择证件类型')
const relationColor = ref({
	color: '#d7d7d7'
})
const cardTypeColor = ref({
	color: '#d7d7d7'
})

const selRelationship = () => {
	uni.showActionSheet({
		title: '请选择与本人关系',
		itemList: ['本人', '子女', '夫妻', '父母', '朋友'],
		success(res) {
			personData.value.relationType = res.tapIndex
			relationColor.value.color = '#333'
			relation.value = ['本人', '子女', '夫妻', '父母', '朋友'][
				res.tapIndex
			]
		}
	})
}
const selType = () => {
	uni.showActionSheet({
		title: '请选择证件类型',
		itemList: ['身份证', '护照', '港澳通行证'],
		success(res) {
			personData.value.idcardType = res.tapIndex
			cardTypeColor.value.color = '#333'
			cardType.value = ['身份证', '护照', '港澳通行证'][res.tapIndex]
		}
	})
}
const changeDefault = e => {
	personData.value.status = e.detail.value ? 0 : 1
}
const submit = () => {
	for (let k in personData.value) {
		if (
			k != 'address' &&
			(personData.value[k] === '' || personData.value[k] === -1)
		) {
			uni.showToast({
				title: '信息填写错误',
				icon: 'error'
			})
			return
		}
	}
	uni.showLoading({
		title: '加载中'
	})
	addPatient(personData.value).then(({ data }) => {
		uni.hideLoading()
		console.log(personData.value)
		if (data.code === 0) {
			uni.showToast({
				icon: 'success',
				title: '保存成功',
				success() {
					uni.navigateBack()
				}
			})
		} else {
			uni.showToast({
				icon: 'error',
				title: '保存失败'
			})
		}
	})
}
</script>

<style lang="less" scoped>
.add {
	padding: 30rpx;
	font-size: 28rpx;
	color: #aaa;

	.tips {
		margin-bottom: 30rpx;
	}

	.fristLine {
		border-top: 1px solid #f2f2f2;
	}

	.line {
		min-height: 110rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f2f2f2;

		.name {
			font-size: 30rpx;
			color: #333;
			width: 210rpx;
		}
		input,
		textarea {
			color: #333;
		}
		.placeholder {
			color: #d7d7d7;
			font-size: 28rpx;
			width: 400rpx;
		}

		.icon-xiangyou1 {
			margin-left: auto;
		}

		.setDefault {
			margin-left: auto;
			color: #006eff;
			transform: scale(0.7);
		}
	}

	.tip {
		margin: 30rpx 0;
		font-size: 24rpx;
		color: #aaa;
		background: #f7f8f8;
		line-height: 48rpx;
		padding: 10rpx 20rpx;
	}

	.save {
		width: 686rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		background: #006eff;
		border-radius: 4px;
	}
}
</style>
